import React, {Component} from 'react';
import {
    StyleSheet,
    Style,
    Image
} from 'react-native';
import {
    StackNavigator,
    TabNavigator
} from "react-navigation";

import IntegralPage from './pages/integral';
import ApplicationPage from './pages/application';
import ResourcesPage from './pages/resource';
import DevicePage from './pages/device';

const Router = TabNavigator(
    {
        IntegralPage:{
            screen:IntegralPage,
            navigationOptions:{
                tabBarLabel:'积分',
                tabBarIcon: ({tintColor,focused}) => (
                    focused
                        ?
                        <Image source = {require('./images/icon_integral_selected.png')} style={{width:25,height:25}}/>
                        :
                        <Image source = {require('./images/icon_integral.png')} style={{width:25,height:25}}/>
                ),    
            }
        },
        ApplicationPage:{
            screen:ApplicationPage,
            navigationOptions:{
                tabBarLabel:'应用',
                tabBarIcon: ({tintColor,focused}) => (
                    focused
                        ?
                        <Image source = {require('./images/icon_application_selected.png')} style={{width:25,height:25}}/>
                        :
                        <Image source = {require('./images/icon_application.png')} style={{width:25,height:25}}/>
                ),    
            }
        },
        ResourcesPage:{
            screen:ResourcesPage,
            navigationOptions:{
                tabBarLabel:'资源',
                tabBarIcon: ({tintColor,focused}) => (
                    focused
                        ?
                        <Image source = {require('./images/icon_resource_selected.png')} style={{width:25,height:25}}/>
                        :
                        <Image source = {require('./images/icon_resource.png')} style={{width:25,height:25}}/>
                ),    
            }
        },
        DevicePage:{
            screen:DevicePage,
            navigationOptions:{
                tabBarLabel:'设备',
                tabBarIcon: ({tintColor,focused}) => (
                    focused
                        ?
                        <Image source = {require('./images/icon_device_selected.png')} style={{width:25,height:25}}/>
                        :
                        <Image source = {require('./images/icon_device.png')} style={{width:25,height:25}}/>
                ),    
            }
        }
    },
        {
            initialRouteName: 'IntegralPage',
            animationEnabled: true, // 切换页面时不显示动画
            tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
            swipeEnabled: true, // 是否左右滑动,如果有DrawerNavigator,最好设置为false避免手势冲突
            backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
            tabBarOptions: {
                activeTintColor: '#303f9f', // 文字和图片选中颜色
                inactiveTintColor: '#ababab', // 文字和图片默认颜色
                showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
                indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
                style: {
                    backgroundColor: '#F5FCFF', // TabBar 背景色
                    height:50,
                    borderTopWidth:0.2,
                    borderTopColor:'#5164cc'
                },
                labelStyle: {
                    fontSize: 12, 
                    marginTop: 0,
                },
            },
        }                  
);
const styles = StyleSheet.create({    
    icon:{
        width:25,
        height:25
    }
});
export default Router;